<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '反馈问题',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="feedback">
    <view class="fixed-bg"></view>
    <view class="feedback__content">
      <label class="required">类型</label>
      <view class="flex flex-wrap gap-2 mb-4">
        <c-tag
          v-for="el in typeList"
          :key="el.value"
          :type="form.type.split(',').includes(el.label) ? 'primary' : 'default'"
          :text="el.label"
          @click="chooseType(el)"
        ></c-tag>
      </view>
      <label>备注：</label>
      <wd-textarea
        v-model="form.content"
        :maxlength="500"
        placeholder="请填写问题描述，最多500个字符"
        custom-textarea-container-class="textarea-container"
      />

      <c-button block customClass="w-full mt-5" :disabled="!form.type" @click="handleSubmit"
        >提交</c-button
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ApiJobFeedback } from '@/service/job';
  import { ApiGetDictData } from '@/service/common';
  import { DictType } from '@/service/app/types';

  const typeList = ref<Array<DictType>>([]);
  const form = ref({
    type: '',
    content: '',
    jobId: '',
  });
  const chooseType = (el: DictType) => {
    console.log(el);
    let arr = [];
    if (form.value.type) {
      arr = form.value.type.split(',');
    }

    if (arr.includes(el.label)) {
      arr = arr.filter((item) => item !== el.label);
    } else {
      arr.push(el.label);
    }
    form.value.type = arr.join(',');
  };

  const handleSubmit = () => {
    if (!form.value.type) {
      uni.showToast({
        title: '请选择类型',
        icon: 'none',
      });
      return;
    }

    uni.showLoading({
      title: '提交中',
    });

    ApiJobFeedback({
      type: form.value.type,
      content: form.value.content,
      jobId: form.value.jobId,
    })
      .then((res) => {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      })
      .finally(() => {
        setTimeout(() => {
          uni.hideLoading();
        }, 500);
      });
  };
  onLoad(({ params }) => {
    if (params) {
      params = JSON.parse(params);
      form.value.jobId = params.id;
    }
    ApiGetDictData('que_type').then((res) => {
      typeList.value = res.data as Array<DictType>;
    });
  });
</script>

<style lang="scss" scoped>
  .feedback {
    padding: 32rpx;
    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__content {
      background: #ffffff;
      border-radius: 20rpx;
      border: 2rpx solid rgba(62, 70, 84, 0.05);
      padding: 32rpx;
      label {
        font-size: 28rpx;
        color: $uni-color-title;
        display: block;
        margin-bottom: 24rpx;
        &.required {
          position: relative;
          padding-left: 20rpx;
          &::before {
            content: '*';
            color: #ff4d4f;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
      }
    }
  }
  :deep(.wd-textarea) {
    border-radius: 20rpx;
    .textarea-container {
      background: transparent !important;
    }
  }
</style>
